<template>
  <div>
    <div class="filter-bar-query">
      <el-row style="height: 40px;" >
        <el-col :span="1" style="text-align: center">
          <el-button size="small" type="primary" @click="createChannel('/settings/create-channel')" class="el-icon-plus"> 新建通道</el-button>
        </el-col>
        <el-col :span="4" :offset="19">
        <el-input class="search-box" placeholder="搜索" icon="search" size="small" v-model="search" @keyup.enter.native = "SearchIndexContent" @click='SearchIndexContent'>
        </el-input>
        </el-col>
      </el-row>
      <el-table :data="channelData" style="margin-top:10px;">
        <el-table-column prop="name" label="通道名称"></el-table-column>
        <el-table-column prop="name" label="通道类型"></el-table-column>
        <el-table-column prop="name" label="Server(IP)"></el-table-column>
        <el-table-column prop="name" label="状态"></el-table-column>
        <el-table-column prop="name" label="操作">
          <template scope="scope">
            <el-button type="text" @click="startCannel(scope.row.id)">启用</el-button>
            <el-button type="text" @click="editCannel(scope.row.id)">编辑</el-button>
            <el-button type="text" @click="delCannel(scope.$index)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-row>
        <el-col :span="20" style="text-align: right;" :offset="4">
          <el-pagination style="padding-right: 0;margin-top: 10px;"
            @current-change="channelCurrentChange"
            :current-page.sync="currentPage"
            :page-size="10"
            layout="total, prev, pager, next"
            :total="10">
          </el-pagination>
        </el-col>
      </el-row>
    </div>
    <el-dialog
      title="提示"
      :visible.sync="channelActiveVisible"
      size="tiny">
      <span>是否要{{activeStatus}}当前通道</span>
      <span slot="footer" class="dialog-footer">
        <el-button size="small" @click="channelActiveVisible = false">取 消</el-button>
        <el-button size="small" type="primary" @click="activeConfrim">确 定</el-button>
      </span>
    </el-dialog>
    <el-dialog
      title="提示"
      :visible.sync="channelVisible"
      size="tiny">
      <span>是否要删除当前通道</span>
      <span slot="footer" class="dialog-footer">
        <el-button size="small" @click="channelVisible = false">取 消</el-button>
        <el-button size="small" type="primary" @click="delConfrim">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
  import { Col, Row, Input, Button, Table, TableColumn, Dialog, Pagination } from 'element-ui'
  export default {
    methods: {
      activeConfrim () {
        this.channelActiveVisible = false
      },
      startCannel () {
        this.channelActiveVisible = true
      },
      channelCurrentChange (v) {
        this.currentPage = v
      },
      editCannel (id) {
        this.$router.push('/settings/edit-channel')
      },
      delConfrim () {
        this.channelVisible = false
        this.channelData.splice(this.index, 1)
      },
      delCannel (index) {
        this.index = index
        this.channelVisible = true
      },
      createChannel (path) {
        this.$router.push(path)
      },
      SearchIndexContent () {}
    },
    data () {
      return {
        activeStatus: '启用',
        channelActiveVisible: false,
        channelData: [
          {}
        ],
        currentPage: 1,
        channelVisible: false,
        index: '',
        search: ''
      }
    },
    components: {
      'el-col': Col,
      'el-row': Row,
      'el-input': Input,
      'el-button': Button,
      'el-table': Table,
      'el-table-column': TableColumn,
      'el-dialog': Dialog,
      'el-pagination': Pagination
    }
  }
</script>
<style lang="scss" scoped>
  .filter-bar-query {
    height: 40px;
    padding: 0 10px;
    border-bottom: 1px solid #e5e5e5;
  }
</style>